<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric.js 双 Canvas 路径绘制系统</title>
    <script src="./fabric6.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .canvas-container {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .canvas-group {
            display: flex;
            flex-direction: column;
        }
        canvas {
            border: 1px solid #ddd;
        }
        .controls {
            margin-top: 10px;
        }
        button {
            padding: 8px 15px;
            margin-right: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        label {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h3>Fabric.js 双 Canvas 路径绘制系统</h3>
    
    <div class="canvas-container">
        <div class="canvas-group">
            <label for="canvas-draw">绘制 Canvas</label>
            <canvas id="canvas-draw" width="600" height="400"></canvas>
        </div>
        <div class="canvas-group">
            <label for="canvas-display">展示 Canvas (黑色背景)</label>
            <canvas id="canvas-display" width="600" height="400"></canvas>
        </div>
    </div>
    
    <div class="controls">
        <button id="clear-draw">清除绘制</button>
        <button id="clear-display">清除展示</button>
        <button id="sync-display">同步到展示</button>
        <button id="download">下载展示图</button>
        <label>线条宽度: <input type="range" id="stroke-width" min="20" max="50" value="20"></label>
    </div>

    <script>
        // 初始化 Fabric.js Canvas 实例
        const drawCanvas = new fabric.Canvas('canvas-draw');
        const displayCanvas = new fabric.Canvas('canvas-display');
        
        // 设置展示 Canvas 背景为黑色
        displayCanvas.backgroundColor = 'black';
        displayCanvas.renderAll();
        
        // 绘制状态变量
        let strokeWidth = 20; // 默认宽度 20
        let paths = [];
        
        // 初始化绘制设置（默认启用绘画模式）
        drawCanvas.isDrawingMode = true;
        drawCanvas.freeDrawingBrush = new fabric.PencilBrush(drawCanvas);
        drawCanvas.freeDrawingBrush.color = 'black';
        drawCanvas.freeDrawingBrush.width = strokeWidth;
        drawCanvas.freeDrawingBrush.strokeLineCap = 'round';  // 线条端点圆润
        drawCanvas.freeDrawingBrush.strokeLineJoin = 'round'; // 线条拐角圆润
        
        // 事件监听
        document.getElementById('clear-draw').addEventListener('click', clearDrawCanvas);
        document.getElementById('clear-display').addEventListener('click', clearDisplayCanvas);
        document.getElementById('sync-display').addEventListener('click', syncToDisplay);
        document.getElementById('download').addEventListener('click', downloadDisplay);
        document.getElementById('stroke-width').addEventListener('input', updateStrokeWidth);
        
        // 监听绘制事件，收集路径数据
        drawCanvas.on('path:created', function(e) {
            paths.push(e.path);
        });
        
        // 更新线条宽度和样式
        function updateStrokeWidth(e) {
            strokeWidth = parseInt(e.target.value);
            drawCanvas.freeDrawing.brush.width = strokeWidth;
        }
        
        // 清除绘制 Canvas
        function clearDrawCanvas() {
            drawCanvas.clear();
            paths = [];
        }
        
        // 清除展示 Canvas
        function clearDisplayCanvas() {
            displayCanvas.clear();
            displayCanvas.backgroundColor = 'black';
            displayCanvas.renderAll();
        }
        
        // 同步到展示 Canvas
        function syncToDisplay() {
            clearDisplayCanvas();
            
            paths.forEach(path => {
                const pathData = path.toObject(['path', 'strokeWidth', 'left', 'top']);
                
                const newPath = new fabric.Path(pathData.path, {
                    left: pathData.left,
                    top: pathData.top,
                    fill: null,
                    stroke: 'white',
                    strokeWidth: pathData.strokeWidth,
                    selectable: false,
                    strokeLineCap: 'round',  // 确保展示时端点圆润
                    strokeLineJoin: 'round'  // 确保展示时拐角圆润
                });
                
                displayCanvas.add(newPath);
            });
            
            displayCanvas.renderAll();
        }
        
        // 下载展示图
        function downloadDisplay() {
            const imgUrl = displayCanvas.toDataURL('image/png');
            const a = document.createElement('a');
            a.href = imgUrl;
            a.download = 'black-background-white-path.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    </script>
</body>
</html>